import React, { useContext } from 'react'

let Context = React.createContext()//1 使用react.createContext方法创建一个对象
// console.dir(Context);
let theme = {
  background: 'red'
}

function App() {
  return (
    // 2 在组件最外层使用Context.Provider组件包裹，把数据通过value属性传递出去
    <Context.Provider value={theme}>
      <div>
        <Children></Children>
      </div>
    </Context.Provider>
  );
}

function Children() {
  let datas = useContext(Context)//3 使用useContext把最外层组件传递的数据注入到当前组件中
  // console.log(datas);
  return (
    <div style={{ background: datas.background }}>
      Children
    </div>
  )
}
export default App;